<template>
  <div>
    <x-header style="position: fixed;top:0px;width: 100%;z-index: 9999" v-if="showTitleBar">
      <svg class="icon" aria-hidden="true" slot="overwrite-left"
           style="font-size: 30px;position:relative;top:-6px;left:-10px;"
           @click="drawerVisibility = !drawerVisibility">
        <use xlink:href="#icon-guanyuwomen"></use>
      </svg>
      <span>{{currentTitle}}</span>
    </x-header>
    <div style="width: 100%;">
      <overview class="page-container" v-if="currentIndex == 0">
      </overview>
      <wealth class="page-container*" v-else-if="currentIndex ==1">
      </wealth>
      <rights-and-interests class="page-container" v-else-if="currentIndex == 2">
      </rights-and-interests>
    </div>

    <bottom-tab @onTabClick="onTabClicked" style="z-index: 9999"></bottom-tab>
  </div>
</template>

<script>
  import { Group, Cell, ButtonTab, ButtonTabItem, XHeader, Drawer } from 'vux'
  import BottomTab from '@/components/BottomTab'
  import Overview from '@/page/home/Overview'
  import Wealth from '@/page/home/Wealth'
  import RightsAndInterests from '@/page/home/RightsAndInterests'

  export default {
    name: 'HelloWorld',
    components: {
      Group,
      Cell,
      ButtonTab,
      ButtonTabItem,
      BottomTab,
      XHeader,
      Drawer,
      Overview,
      Wealth,
      RightsAndInterests
    },
    data () {
      return {
        currentTitle: '',
        drawerVisibility: true,
        showModeValue: 'overlay',
        currentIndex: 0,
        selectedIndex: 0,
        showTitleBar: true
      }
    },
    created () {
      this.showTitleBar = this.$store.state.showTitleBar
    },
    updated () {
      window.scroll(0, 0)
    },
    mounted () {
//      this.getGoodsList()
    },
    destroyed () {},
    methods: {
      getGoodsList () {
        this.$axios.get('/api/goods').then((res) => {
        })
      },
      onTabClicked (event) {
        this.currentTitle = event.item.text
        this.currentIndex = event.index
        this.$store.commit('setTitle', event.item.text)
      },
      onDrawerChangeClick () {
        this.drawerVisibility = !this.drawerVisibility
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-container {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
  }
</style>
